<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/contextMenu.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="http://7jpri5.com1.z0.glb.clouddn.com/contextMenu.js"></script>
		<style>
			body {
				background: #000;
			}
			
			.container {
				width: 1000px;
				height: 720px;
				position: absolute;
				left: 50%;
				margin: 100px 0 0 -500px;
			}
			
			.container .box {
				width: 46%;
				height: 100%;
				background: #eee;
			}
			
			#box1 {
				float: left;
			}
			
			#box2 {
				float: right;
			}
			
			.title {
				height: 50px;
				line-height: 50px;
				font-size: 24px;
				text-align: center;
			}
			
			pre {
				font-size: 12px;
				font-family: "微软雅黑";
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div id="box1" class="box">
				<div class="title">右键点我！</div>
				<pre>
				$("#box1").contextMenu({
					menu: [{
							text: "新增",
							callback: function() {
								alert("新增");
							}
						},
						{
							text: "复制",
							callback: function() {
								alert("复制");
							}
						},
						{
							text: "粘贴",
							callback: function() {
								alert("粘贴");
							}
						},
						{
							text: "删除",
							callback: function() {
								alert("删除");
							}
						}
					]
				});	
				</pre>
			</div>
			<div id="box2" class="box">
				<div class="title">右键点我！</div>
				<pre>
			$("#box2").contextMenu({
				width: 110,// width
				itemHeight: 30,// 菜单项height
				bgColor: "#333",// 背景颜色
				color: "#fff",// 字体颜色
				fontSize: 12,// 字体大小
				hoverBgColor: "#99CC66",// hover背景颜色
				target: function(ele) {// 当前元素
					console.log(ele);
				},
				menu: [{// 菜单项
						text: "新增",
						icon: "img/add.png",
						callback: function() {
							alert("新增");
						}
					},
					{
						text: "复制",
						icon: "img/copy.png",
						callback: function() {
							alert("复制");
						}
					},
					{
						text: "粘贴",
						icon: "img/paste.png",
						callback: function() {
							alert("粘贴");
						}
					},
					{
						text: "删除",
						icon: "img/del.png",
						callback: function() {
							alert("删除");
						}
					}
				]
			
			});
					</pre>
			</div>
		</div>
		<script>
			$("#box1").contextMenu({
				menu: [{
						text: "新增",
						callback: function() {
							alert("新增");
						}
					},
					{
						text: "复制",
						callback: function() {
							alert("复制");
						}
					},
					{
						text: "粘贴",
						callback: function() {
							alert("粘贴");
						}
					},
					{
						text: "删除",
						callback: function() {
							alert("删除");
						}
					}
				]
			});

			$("#box2").contextMenu({
				width: 110, // width
				itemHeight: 30, // 菜单项height
				bgColor: "#333", // 背景颜色
				color: "#fff", // 字体颜色
				fontSize: 12, // 字体大小
				hoverBgColor: "#99CC66", // hover背景颜色
				target: function(ele) { // 当前元素
					console.log(ele);
				},
				menu: [{ // 菜单项
						text: "新增",
						icon: "img/add.png",
						callback: function() {
							alert("新增");
						}
					},
					{
						text: "复制",
						icon: "img/copy.png",
						callback: function() {
							alert("复制");
						}
					},
					{
						text: "粘贴",
						icon: "img/paste.png",
						callback: function() {
							alert("粘贴");
						}
					},
					{
						text: "删除",
						icon: "img/del.png",
						callback: function() {
							alert("删除");
						}
					}
				]

			});
		</script>
	</body>

</html>